<template>
  <div>
    <!-- 搜索栏 头部 -->
    <van-sticky>
      <!-- 头部标签栏 -->
      <van-nav-bar
        title="限时特卖"
        left-arrow
        @click-left="$router.push('/home/activity')"
      >
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </van-sticky>
   <!-- 内容 -->
    <van-pull-refresh
      v-model="loading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <div class="kuang">
        <div class="imgs" v-for="item in premium" :key="item.id" @click="$router.push({ path: '/activity/activity-four-view', query: { id: item.id } })">
          <img :src="item.images" alt="" />
          <div>
            <b>{{item.title}}</b>
            <h3>￥{{item.price}}</h3>
            <span>供出售{{item.numsc}}&nbsp;&nbsp;</span>
            <small>{{item.numpl}}人评论</small>
          </div>
        </div>

      </div>
    </van-pull-refresh>

    <!--  -->
    <van-back-top style="width: 100px; background-color: orange"
      >返回顶部</van-back-top
    >
  </div>
</template>

<script setup>

import myaxios from "@/http/MyAxios";
import { onMounted, ref } from "vue";
const loading = ref(false);

const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};

// 精品优选
const premium = ref();

onMounted(() => {
  let url = "http://127.0.0.1:5000/actweek/actweekfour";
  myaxios.get(url).then((res) => {
    console.log("结果", res);
    premium.value = res.data.data;
  });
});
</script>

<style lang="scss" scoped>
.kuang {
  // border: 1px solid blue;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.kuang .imgs {
  margin: 10px 5px;
  /* 上下边距为10px，左右边距为5px */
  height: 300px;
  // border: 1px solid red;
  width: calc((100% - 2 * 5px - 2 * 10px) / 2);
  /* 减去两个边距和两个图片间的间距 */

  div {
    b {
      display: block;
      margin: 10px 0 0 10px;
      font-weight: 400;
    }

    h3 {
      color: red;
      margin: 20px 0 5px 10px;
    }

    span {
      margin-left: 10px;
    }

    small {
      font-size: 0.9em;
    }
  }
}

.kuang .imgs img {
  display: block;
  width: 100%;
  height: 180px;
}
</style>